まずは、テーブルを表示させるための文字をAタグを使って作成します（リンク先となるHREF属性は「#」としておきます。続いて、文字上にマウスポインタが来たときの動作を記述します。これはonMouseoverイベントに、「window['（テーブルのID）'].style.display='block'」と記述します。 <A href="#" onMouseover="window['table1'].style.display='block'">価格表</A>

	このままでは、マウスポインタが文字上から外へ移動したとき、テーブルが表示されたままの状態になってしまいます。さらにonMouseoutイベントを追加し、テーブルを非表示にするための記述を付け加えてください。onMouseoutイベントの記述は、「window['（テーブルのID）'].style.display='none'」となります。 <A href="#" onMouseover="window['table1'].style.display='block'"  onMouseout="window['table1'].style.display='none'">価格表</A>

最後に表示／非表示されるテーブルを作成します。テーブルの作成において注意すべき点は２つ。ひとつ目は、TABLEタグにid属性を追加しておくこと（先の‘テーブルのID’と同じ名前をつける）。ふたつ目は、style属性を「display:none」としておくことです。これらを忘れるとテーブルの表示／非表示が正しく機能しません。それ以外の記述は、通常のテーブル作成と同様で構いません。 <TABLE id="table1" border="1" style="display:none"> <TR><TH bgcolor="#00AAAA">製品名</TH><TH bgcolor="#00AAAA">価格</TH></TR> <TR><TD>AX-100</TD><TD align="right">\3,800</TD></TR> <TR><TD>AX-200</TD><TD align="right">\4,800</TD></TR> <TR><TD>AX-400</TD><TD align="right">\6,800</TD></TR> <TR><TD>AX-400super</TD><TD align="right">\12,800</TD></TR> </TABLE>

G�|�C���g�|�C���@Amazon Yahoo �y�V

�����z�[���y�[�W �y�V���o�C��[UNLIMIT��������1�~] �C�O�i���q���� �C�O���s�����������I